<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../corea.css">
<link rel="stylesheet" href="../itab.css">
<style type="text/css" title="">
html{
padding:0!important;
padding:28px 0 32px;
}
body{
margin:28px 0 32px;
}
.ihead{
position:fixed;
width:100%;
top:0;
left:0;
height:28px;
background-color:#e3edf9;
}
.ibody{
height:auto!important;
height:100%;/*  */
/* position:absolute;
top:32px;
bottom:32px;
left:0;right:0;width:100%;overflow:auto;
 */background-color:#f9f9f9;
}
.ifoot{
position:fixed;
bottom:0;
left:0;
width:100%;
height:31px;
border-top:solid #add8e6 1px;
background-color:#e3edf9;
}
</style>
<title>demo css stdui</title>
<script type="text/javascript" src="../../jquery/jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var jQ=jQuery.noConflict();
jQ(function(jQ){
    jQ('.itab > .ibar > .item').mouseover(function(){
        jQ('.itab > .ibar > .act').removeClass('act');
        jQ(this).addClass('act').find('> .a').click(function(){return false;});
        var idx = jQ(this).index();
        jQ('.itab > .on').removeClass('on').addClass('off');
        jQ('#ibody > div').eq(idx-1).removeClass('off').addClass('on');
        return false;});
});
//]]>
</script>
<script type="text/javascript" src="../core.js"></script>
</head>
<body>
<div class=ihead>
    <div class=itab>
        <dl class=ibar>
            <dd class=item style='background:#f9f9f9;margin:0;padding:0 8px;'><div class=logo title='logo'><a href='index.htm'><img src='logo.gif'></a></div></dd>
            <dd class=item><a class=a title='js-stdui' href='js-stdui.htm'><img class=ico src='http://gs.itiens.com/icos/house.png'><div class=txt>js-stdui</div></a></dd>
            <dd class='item act'><a class=a title='about' href='about'><img class=ico src='http://gs.itiens.com/icos/information.png'><div class=txt>about</div></a></dd>
            <dd class=item><a class=a title='login' href='login'><img class=ico src='http://gs.itiens.com/icos/cog.png'><div class=txt>login</div></a></dd>
            <dd class=item><a class=a title='contact' href='contact'><img class=ico src='http://gs.itiens.com/icos/vcard.png'><div class=txt>contact</div></a></dd>
        </dl>
    </div>
</div>
<div id=ibody class='ibody itab'>
<div class='off'>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
body-1<br>
</div>
<div class='on'>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
body-2<br>
</div>
<div class='off'>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
body-3<br>
</div>
<div class='off'>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
body-4<br>
</div>
</div>
<div id=ifoot class=ifoot>foot</div>
<script type="text/javascript">
//<![CDATA[
var pb = pos(me.body);
$('ifoot').html(strJson(pb));
//]]>
</script>
</body>
</html>
